<template>
	<view class="">
		<view class="kong">

		</view>
		<header>
			<view class="shopping-top-bar">
				<input type="text" placeholder="牛牛日志" class="shopping-top-bar-search-box" @click="search">
				<image src="../../static/img/sousuo.png" mode="" class="sou"></image>
				<view class="shopping-top-bar-else">
					<image class="iconfont" src="../../static/img/sangedian.png" @click="show = true">
				</view>
			</view>
		</header>
		<nav>
			<view class="shopping-navigation">
				<view class="shopping-navigation-indent" @click="order">
					<text class="shopping-navigation-indent-dan"> <img src="../../static/img/wodedingdan.png" alt=""
							class="iconfont1"></text>
					<view class="shopping-navigation-indent-name">我的订单</view>
				</view>
				<view class="shopping-navigation-indent" @click="cart">
					<text class="shopping-navigation-indent-car"><img src="../../static/img/gouwuche.png" alt=""
							class="iconfont1"></text>
					<view class="shopping-navigation-indent-name">购物车</view>
				</view>
				<view class="shopping-navigation-indent" @click="roll">
					<text class="shopping-navigation-indent-ka"><img src="../../static/img/kaquan.png" alt=""
							class="iconfont1"></text>
					<view class="shopping-navigation-indent-name">卡券</view>
				</view>
				<view class="shopping-navigation-indent" @click="store">
					<text class="shopping-navigation-indent-dian"><img src="../../static/img/xinyuandan.png" alt=""
							class="iconfont1"></text>
					<view class="shopping-navigation-indent-name">心愿单</view>
				</view>
				<view class="shopping-navigation-indent" @click="record">
					<text class="shopping-navigation-indent-ji"><img src="../../static/img/liulanjilu.png" alt=""
							class="iconfont1"></text>
					<view class="shopping-navigation-indent-name">浏览记录</view>
				</view>
			</view>
		</nav>
		<section class="shopping-commodity">
			<article class="shopping-commodity-stores" v-for="(item,shopin) in merchandiseews" :key="shopin"
				@click="spxqy(shopin)">
				<view class="shopping-commodity-stores-xiaoxi-img">
					<image :src="item.image[3]" mode=""></image>
				</view>
				<view class="shopping-commodity-stores-xiaoxi-title">{{item.description}}</view>
				<view class="shopping-commodity-stores-xiaoxi-money">
					<view class="shopping-commodity-stores-xiaoxi-money-xiaoshu">￥</view>
					<text class="shopping-commodity-stores-xiaoxi-money-price">
						{{ Math.floor(item.attributes.price) }}<span
							class="decimal">{{ (item.attributes.price % 1).toFixed(2).slice(1) }}</span>
					</text>
					<!-- <view class="shopping-commodity-stores-xiaoxi-money-number">{{ item.shopNumber }}人已买</view> -->
				</view>
				<view class="shopping-commodity-stores-xiaoxi-remark">
					<view class="shopping-commodity-stores-xiaoxi-remark-xing">新客<text>|</text>退货包运费</view>
				</view>
			</article>

			<!-- 			<article class="shopping-commodity-low-price">
				<view class="shopping-commodity-low-price-xiaoxi-title">
					<view class="shopping-commodity-low-price-xiaoxi-title-jia">SPQ<text
							class="iconfont">&#xe676;</text>R</view>
					<view class="shopping-commodity-low-price-xiaoxi-title-e">LOWEST PRICE ONLINE
						<view class="shopping-commodity-low-price-xiaoxi-title-e-hei"></view>
					</view>
					<view class="shopping-commodity-low-price-xiaoxi-title-qiang">
						全网低价
					</view>
				</view>
				<view class="shopping-commodity-low-price-xiaoxi-box">
					<view class="shopping-commodity-low-price-xiaoxi-img">
						<img src="" alt="">
						<view class="shopping-commodity-low-price-xiaoxi-img-price">￥12.8</view>
					</view>
					<view class="shopping-commodity-low-price-xiaoxi-img">
						<img src="" alt="">
						<view class="shopping-commodity-low-price-xiaoxi-img-price">￥12.8</view>
					</view>
				</view>
			</article>
 -->
		</section>
		<u-popup :show="show" @close="close" @open="open" :round="30">
			<view class="ShopMoreaFunctionsName">
				<text class="MoreaFunctionsDouble">更多功能</text>
				<image src="../../static/Myimg/Exclamation mark.png" mode="" class="MoreaFunctionsClose"
					@click="close()"></image>
			</view>
			<view class="ShopMoreaFunctions">
				<view class="functionalBlock" v-for="(item,fb) in shopimage" :key="fb" @click="toMeunsList(fb)">
					<view class="functionalBlockImage">
						<image :src="item.functionalBlockImages" mode="" class="functionalBlockImagess"></image>
					</view>
					<view class="MoreaFunctionsNames">
						{{item.MoreaFunctionsNamess}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				merchandiseews: [],
				shopimage: [{
					functionalBlockImages: require("../../static/img/gouwuche.png"),
					MoreaFunctionsNamess: "购物车"
				}, {
					functionalBlockImages: require("../../static/img/wodedingdan.png"),
					MoreaFunctionsNamess: "订单"
				}, {
					functionalBlockImages: require("../../static/img/kaquan.png"),
					MoreaFunctionsNamess: "卡券"
				}, {
					functionalBlockImages: require("../../static/img/xinyuandan.png"),
					MoreaFunctionsNamess: "心愿单"
				}, {
					functionalBlockImages: require("../../static/img/dizhiguanli.png"),
					MoreaFunctionsNamess: "地址管理"
				}]
}
},
	onLoad() {
		this.request("/shoppingAll/shoppingList","get", this.merchandiseews).then(
			(res) => {
				this.merchandiseews= res.data.result.result;
			}).catch((err) => {
			console.log(err);
		});
	},

		methods: {

			// 搜索
			search() {
				uni.navigateTo({
					url: "/pages/searchBox/Shoppingsearch"
				})
			},

			spxqy(e){
			    uni.navigateTo({
			    	url:"/pages/Productdetails/ProductDetails?productId="+this.merchandiseews[e].productId
			    })	
			},
			// 订单
			order() {
				uni.navigateTo({
					url: "./orderAll"
				})
			},
			// 卡券
			roll() {
				uni.navigateTo({
					url: "/pages/trade/roll/Roll"
				})
			},
			// 购物车
			cart() {
				uni.navigateTo({
					url: "/pages/Productdetails/Cart"
				})
			},
			// 心愿单
			store() {
				uni.navigateTo({
					url: "/pages/searchBox/Wishlist"
				})
			},
			// 浏览记录
			record() {
				uni.navigateTo({
					url: "/pages/trade/ProductBrowsingHistory"
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toMeunsList(e) {
				console.log(e) //这里打印出来是 0 1 2 3 数组索引值
				if (e == 0) {
					this.show = false
					uni.navigateTo({
						url: "/pages/Productdetails/Cart" //购物车
					})
				}
				if (e == 1) {
					this.show = false
					uni.navigateTo({
						url: "./orderAll" //订单
					})
				}
				if (e == 2) {
					this.show = false
					uni.navigateTo({
						url: "/pages/trade/roll/Roll" //卡券
					})
				}
				if (e == 3) {
					this.show = false
					uni.navigateTo({
						url: "/pages/searchBox/Wishlist" //心愿单
					})
				}
				if (e == 4) {
					this.show = false
					uni.navigateTo({
						url: "/pages/addreeList/addreeList" //地址管理
					})
				}
			}
		}
	}
</script>
<style scoped>
	page {
		background: rgb(246, 246, 246);
	}

	.kong {
		width: 100%;
		height: 60rpx;
	}


	.adf {
		margin-top: 20rpx;
		margin-left: 10rpx;
		width: 350rpx;
		height: 480rpx;
		background-color: #fff;
	}

	.iconfont1 {
		width: 50rpx;
		height: 50rpx;
	}

	/* 	a {
		text-decoration: none;
	}
 */
	.sou {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 50rpx;
		top: 50rpx;

	}

	.shopping-top-bar {
		width: 100%;
		height: 100rpx;
		/* border: 2rpx solid black; */
		position: relative;
		position: sticky;
		top: 2rpx;
		display: flex;

	}

	.shopping-top-bar>.shopping-top-bar-search-box {
		width: 600rpx;
		height: 60rpx;
		/* border: 2rpx solid black; */
		border-radius: 40rpx;
		margin-top: 40rpx;
		margin-left: 40rpx;
		padding-left: 60rpx;
		background-color: #fff;
	}

	.shopping-top-bar>.shopping-top-bar-else {
		width: 60rpx;
		height: 60rpx;
		/* border: 2rpx solid black; */
		margin-top: 40rpx;
		margin-left: 40rpx;
	}

	.shopping-top-bar>.shopping-top-bar-else .iconfont {
		width: 40rpx;
		height: 40rpx;
	}

	.shopping-navigation {
		width: 100%;
		height: 160rpx;
		/* border: 2rpx solid black; */
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

	}

	.shopping-navigation>.shopping-navigation-indent {
		height: 160rpx;
		width: 150rpx;
		/* border: 2rpx solid black; */

	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-dan {
		display: inline-block;
		height: 80rpx;
		width: 120rpx;
		/* border: 2rpx solid black; */
		text-align: center;
		margin-top: 28rpx;
		margin-left: 20rpx;
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-car {
		display: inline-block;
		height: 80rpx;
		width: 120rpx;
		/* border: 2rpx solid black; */
		text-align: center;
		margin-top: 28rpx;
		margin-left: 20rpx;
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-car>.iconfont {
		font-size: 60rpx;
		color: #000;
		/* font-weight: 700; */
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-ka {
		display: inline-block;
		height: 80rpx;
		width: 120rpx;
		/* border: 2rpx solid black; */
		text-align: center;
		margin-top: 28rpx;
		margin-left: 20rpx;
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-ka>.iconfont {
		font-size: 60rpx;
		color: #000;
		/* font-weight: 700; */
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-dian {
		display: inline-block;
		height: 80rpx;
		width: 120rpx;
		/* border: 2rpx solid black; */
		text-align: center;
		margin-top: 28rpx;
		margin-left: 20rpx;
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-dian>.iconfont {
		font-size: 60rpx;
		color: #000;
		/* font-weight: 700; */
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-ji {
		display: inline-block;
		height: 80rpx;
		width: 120rpx;
		/* border: 2rpx solid black; */
		text-align: center;
		margin-top: 28rpx;
		margin-left: 20rpx;
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-ji>.iconfont {
		font-size: 60rpx;
		color: #000;
		/* font-weight: 700; */
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-dan>.iconfont {
		font-size: 70rpx;
		color: #000;
		font-weight: 700;
	}

	.shopping-navigation>.shopping-navigation-indent>.shopping-navigation-indent-name {
		width: 150rpx;
		height: 50rpx;
		/* border: 2rpx solid black; */
		color: #000;
		text-align: center;
		font-size: 20rpx;
	}

	.shopping-commodity {
		width: 100%;
		/* border: 2rpx solid black; */
		display: flex;
		margin-top: 16rpx;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.shopping-commodity-stores {
		display: block;
		width: 360rpx;
		/* height: 600rpx; */
		/* border: 2rpx solid black; */
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 4rpx;
		margin-left: 11rpx;
		margin-bottom: 2rpx;
		position: relative;
		top: 0;
		/* 初始位置 */
		left: 0;
		/* 初始位置 */
	}

	.shopping-commodity-stores::before {
		content: "";
		position: absolute;
		top: 0;
		/* 相对于上一个元素的位置 */
		left: 0;
		/* 相对于上一个元素的位置 */
		width: 100%;
		/* 宽度 */
		height: 100%;
		/* 高度 */
		background-color: red;
		/* 为了可视化 */
		z-index: -1;
		/* 确保这个元素不会影响布局 */
	}

	.shopping-commodity-stores-xiaoxi-img {
		width: 358rpx;
		height: 375rpx;
		/* border: 2rpx solid rgba(0, 0, 0,0.1); */
		/* 	background-image: url(); */
		border-radius: 20rpx 20rpx 0 0;
		background-size: cover;
		background-color: #fff;

	}

	.shopping-commodity-stores-xiaoxi-img>image {
		width: 358rpx;
		height: 375rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-size: cover;

	}

	.shopping-commodity-stores-xiaoxi-title {
		width: 360rpx;
		/* height: 90rpx; */
		margin-top: 14rpx;
		/* border: 2rpx solid black; */
		font-size: 32rpx;
		color: #000;
	}

	.shopping-commodity-stores-xiaoxi-money {
		width: 360rpx;
		height: 50rpx;
		margin-top: 8rpx;
		/* border: 2rpx solid black; */
	}

	.shopping-commodity-stores-xiaoxi-money-xiaoshu {
		display: inline-block;
		color: #000;
		font-size: 24rpx;
	}

	.shopping-commodity-stores-xiaoxi-money-price {
		color: #000;
		font-size: 32rpx;
	}

	.shopping-commodity-stores-xiaoxi-money-price .decimal {
		font-size: 28rpx;
		/* 比整数部分小两个字号 */
	}

	.shopping-commodity-stores-xiaoxi-money-number {
		display: inline-block;
		font-size: 24rpx;
		padding-left: 14rpx;
	}

	.shopping-commodity-stores-xiaoxi-remark {
		width: 360rpx;
		height: 58rpx;
		display: flex;
		/* border: 2rpx solid black; */
	}

	.shopping-commodity-stores-xiaoxi-remark-xing {
		display: inline-block;
		height: 36rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.5);
		/* margin-top: 4rpx; */
		border-radius: 4rpx;
		padding-left: 4rpx;
		padding-right: 4rpx;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.5);

	}

	.shopping-commodity-stores-xiaoxi-remark-xing>text {
		margin-left: 6rpx;
		margin-right: 6rpx;
		/* font-size: 28rpx; */
	}

	.shopping-commodity-low-price {
		display: inline-block;
		width: 364rpx;
		height: 260rpx;
		margin-left: 10rpx;
		background-color: #fff;

		/* border: 2rpx solid black; */
	}

	.shopping-commodity-low-price-xiaoxi-title {
		width: 364rpx;
		height: 80rpx;
		/* border: 2rpx solid black; */
		background-image: linear-gradient(rgb(251, 202, 210), white);
	}

	.shopping-commodity-low-price-xiaoxi-title-jia {
		width: 160rpx;
		height: 60rpx;
		padding-top: 10rpx;
		/* border: 2rpx solid black; */
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: 700;

	}

	.shopping-commodity-low-price-xiaoxi-title-jia>text {
		font-size: 26rpx;
		width: 2rpx;
		color: red;
		letter-spacing: -4rpx;
	}

	.shopping-commodity-low-price-xiaoxi-title-e {
		margin-left: 20rpx;
		font-size: 8rpx;
		font-weight: 700;

	}

	.shopping-commodity-low-price-xiaoxi-title-e-hei {
		width: 24rpx;
		height: 6rpx;
		background-color: #000;
		margin-left: 26rpx;
		display: inline-block;
	}

	.shopping-commodity-low-price-xiaoxi-title-qiang {
		width: 140rpx;
		height: 60rpx;
		/* border: 2rpx solid black; */
		margin-top: -60rpx;
		margin-left: 220rpx;
		padding-top: 14rpx;
		padding-right: 14rpx;
		text-align: right;

	}

	.shopping-commodity-low-price-xiaoxi-box {
		width: 340rpx;
		height: 180rpx;
	}

	.shopping-commodity-low-price-xiaoxi-img {
		width: 140rpx;
		height: 180rpx;
		display: inline-block;

		/* border: 2rpx solid black;  */
	}

	.shopping-commodity-low-price-xiaoxi-img>img {
		width: 100rpx;
		height: 100rpx;
		margin-left: 32rpx;
		margin-top: 20rpx;
		/* border: 2rpx solid black; */

	}

	.shopping-commodity-low-price-xiaoxi-img-price {
		width: 160rpx;
		height: 60rpx;
		/* border: 2rpx solid black; */
		font-size: 28rpx;
		text-align: center;
		color: #000;
	}

	.ShopMoreaFunctionsName {
		display: flex;
		flex-wrap: wrap;
		background-color: rgb(246, 246, 246);
	}

	.MoreaFunctionsDouble {
		display: inline-block;
		margin-left: 40%;
	}

	.MoreaFunctionsClose {
		width: 40rpx;
		height: 40rpx;
		margin-left: auto;
		/* 将图片推到最右侧 */
		margin-right: 20rpx;
	}

	.ShopMoreaFunctions {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 260rpx;
		/* background-color: #000; */
		align-items: center;
		justify-content: space-evenly;
		background-color: rgb(246, 246, 246);
	}

	.ShopMoreaFunctions>.functionalBlock {
		width: 120rpx;
		height: 150rpx;
		/* background-color: red; */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.functionalBlockImage {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.functionalBlockImage>.functionalBlockImagess {
		width: 50rpx;
		height: 50rpx;
	}

	.MoreaFunctionsNames {
		width: 100%;
		height: 50rpx;
		text-align: center;
		font-size: 28rpx;
	}
</style>